<template>
  <div class="addressCard acenter">
    <slot name="chose"></slot>
    <div class="center">
      <p class="title" v-if="address.place_name">
        {{ address.place_name }}
      </p>
      <div class="userInfo">
        <p class="name">
          {{ address.receiver ? address.receiver : address.contact_person }}
        </p>
        <p class="phone">{{ address.phone }}</p>
      </div>
      <p class="address">
        {{ address.detail ? address.detail : address.detail_address }}
      </p>
    </div>
    <slot name="edit"></slot>
  </div>
</template>

<script setup lang="ts">
interface Address {
  contact_person: string;
  detail_address: string;
  place_name?: string;
  detail?: string;
  receiver?: string;
  phone: string;
  city_province: string;
}
const props = defineProps<{ address: Address }>();
</script>

<style lang="scss" scoped>
.addressCard {
  padding: 30px;
  background: #ffffff;
  border-radius: 20px;
  .center {
    .title {
      font-weight: 500;
      color: #000000;
      font-size: 30px;
    }
    .userInfo {
      display: flex;
      margin-top: 18px;
      .name {
        color: #000000;
        font-size: 26px;
      }
      .phone {
        margin-left: 40px;
        color: #000000;
        font-size: 26px;
      }
    }
    .address {
      margin-top: 10px;
      width: 482px;
      color: #666666;
      font-size: 24px;
      line-height: 34px;
    }
  }
}
</style>
